<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="搜索" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="searchresult">
			<view class="searchresult-inputwrap">
				<view class="searchresult-inputwrap-input">
					<input @confirm="onConfirmSearchByKeywords" v-model="keywords" placeholder="搜搜你喜欢的店" class="searchresult-inputwrap-input-input" />
					<image @click="onClickClearSearchValue" v-if="keywords" :src="commonImg('close.png')" class="searchresult-inputwrap-input-close"></image>
				</view>
			</view>
			<view class="searchresult-list">
				<commodityList :stores="store_list"></commodityList>
			</view>
		</view>
	</view>
</template>
<script>
	import { config, myGetDistance } from '@/utils/config.js'
	import { myMixin } from '@/utils/mixin.js'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	
	import commodityList from "@/components/commodity-list/list.vue"

	export default {
		mixins: [myMixin],
		components: {
			uniNavBar,
			commodityList
		},
		data() {
			return {
				keywords: '',
				page: 1,
				size: 10,
				total: 0,
				totalPage: 0,
				store_list: [],
				flag: '',
				hyId: '',
				latitude: '',
				longitude: ''
			}
		},
		onReachBottom() {
			const page1 = this.page + 1
			const totalPage = this.totalPage
			if (page1 <= totalPage) {
				this.page = page1
				if (this.flag === '1') {
					this._getListDataByHYID(this.hyId)
				} else {
					this._getListDataByKeywords()
				}
			} else {
				uni.showToast({
					title: '已经到底部了',
					icon: 'none'
				})
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.size = 10
			this.total = 0
			this.totalPage = 0
			this.store_list = []
			if (this.flag === '1') {
				this._getListDataByHYID(this.hyId)
			} else {
				if (!this.keywords) {
					uni.showToast({
						icon: 'none',
						title: '请先填写搜索词'
					})
					return false
				}
				this._getListDataByKeywords()
			}
		},
		methods: {
			onConfirmSearchByKeywords(e) {
				if (!e.detail.value) {
					uni.showToast({
						icon: 'none',
						title: '请先填写搜索词'
					})
					return false
				}
				this.page = 1
				this.size = 10
				this.total = 0
				this.totalPage = 0
				this.store_list = []
				this.keywords = e.detail.value
				this._getListDataByKeywords()
			},
			back() {
				uni.navigateBack({})
			},
			// 清空搜索框的内容
			onClickClearSearchValue() {
				this.keywords = ''
				this.page = 1
				this.size = 10
				this.total = 0
				this.totalPage = 0
				this.store_list = []
				this.flag = ''
				this.hyId = ''
				uni.navigateBack({})
			},
			onClickGotoShopDetailPage(id) {
				if (!id) {
					return false
				}
				uni.navigateTo({
					url: `../shopdetail/shopdetail?id=${id}`
				})
			},
			pageTotal(rowCount, pageSize) {
				if (rowCount === null || rowCount === "") {
					return 0;
				} else {
					if ((pageSize !== 0) && (rowCount % pageSize === 0)) {
						return parseInt(rowCount / pageSize)
					}
					if ((pageSize !== 0) && (rowCount % pageSize !== 0)) {
						return parseInt(rowCount / pageSize) + 1
					}
				}
			},
			_getListDataByKeywords() {
				uni.showLoading({ title: '加载中' })
				let page = this.page
				let size = this.size
				const obj = {}
				if (this.keywords) {
					obj.keywords = this.keywords
				}
				uni.request({
					url: `${config.api_base_url}merchant/store/searchStores/${page}/${size}`,
					data: obj,
					method: 'POST',
					success: ((res) => {
						let { status, data } = res.data				
						if (status.flag === true) {
							for (const item of data.storeAndTagsList) {
								if (item.store.rate) {
									const vip2 = JSON.parse(item.store.rate).vip2
									item.store.vip2 = Math.floor(vip2 * 100) / 10
									const vip1 = JSON.parse(item.store.rate).vip1
									item.store.vip1 = Math.floor(vip1 * 100) / 10
								}
								if (item.store.latitude && item.store.longitude) {
									const result = myGetDistance(this.latitude, this.longitude, item.store.latitude, item.store.longitude);
									if (result) {
										item.store.jlresult = result;
									}
								}
							}
							this.total = data.total
							this.totalPage = this.pageTotal(this.total, this.size)
							this.store_list = this.store_list.concat(data.storeAndTagsList)
						} else {
							this.total = 0
							this.totalPage = 0
							this.store_list = []
						}
					}),
					fail: (() => {
						this.store_list = []
					}),
					complete: (() => {
						uni.hideLoading()
						uni.stopPullDownRefresh()
					})
				})
			},
			_getListDataByHYID(id) {
				uni.showLoading({ title: '加载中' })
				let page = this.page
				let size = this.size
				uni.request({
					url: `${config.api_base_url}merchant/industry/${id}/${page}/${size}`,
					data: {},
					method: 'POST',
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							for (const item of data.storeAndTagsList) {
								if (item.store.rate) {
									const vip2 = JSON.parse(item.store.rate).vip2
									item.store.vip2 = Math.floor(vip2 * 100) / 10
									const vip1 = JSON.parse(item.store.rate).vip1
									item.store.vip1 = Math.floor(vip1 * 100) / 10
								}
								if (item.store.latitude && item.store.longitude) {
									const result = myGetDistance(this.latitude, this.longitude, item.store.latitude, item.store.longitude);
									if (result) {
										item.store.jlresult = result;
									}
								}
							}
							this.total = data.total
							this.totalPage = this.pageTotal(this.total, this.size)
							this.store_list = this.store_list.concat(data.storeAndTagsList)
						} else {
							this.total = 0
							this.totalPage = 0
							this.store_list = []
						}
					}),
					fail: (() => {
						this.store_list = []
					}),
					complete: (() => {
						uni.hideLoading()
						uni.stopPullDownRefresh()
					})
				})
			}
		},
		onLoad(e) {
			// 获取你自己的经纬度
			uni.getLocation({
				type: 'wgs84',
				success: res => {
					this.latitude = res.latitude;
					this.longitude = res.longitude;
				},
				fail: err => {
					this.latitude = 38.04276;
					this.longitude = 114.5143;
				},
				complete: () => {
				}
			});
			if (e && e.flag && e.id) {
				this.flag = e.flag
				this.hyId = e.id
				this.keywords = e.name
				this._getListDataByHYID(this.hyId)
			} else {
				this.keywords = e.keywords
				this._getListDataByKeywords()
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped>
	.searchresult {
		width: 100%;
	}

	.searchresult-inputwrap {
		box-sizing: border-box;
		width: 100%;
		height: 88rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		border-top: 1px solid #f3f3f3;
		display: flex;
		align-items: center;
	}

	.searchresult-inputwrap-input {
		width: 100%;
		height: 64rpx;
		line-height: 64rpx;
		background-color: #F8F8F8;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
	}

	.searchresult-inputwrap-input-input {
		height: 100%;
		width: 600rpx;
		box-sizing: border-box;
		padding-left: 36rpx;
		font-size: 28rpx;
		font-weight: 400;
	}

	.searchresult-inputwrap-input-close {
		width: 48rpx;
		height: 48rpx;
		margin-right: 24rpx;
		margin-left: auto;
	}

	.searchresult-list {
		width: 100%;
		box-sizing: border-box;
		padding-left: 16rpx;
		padding-right: 14rpx;
	}

	.searchresult-list-item {
		width: 100%;
		box-sizing: border-box;
		padding-left: 26rpx;
		padding-top: 16rpx;
		display: flex;
	}

	.searchresult-list-item-img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 4rpx;
	}

	.searchresult-list-item-info {
		margin-left: 32rpx;
		display: flex;
		flex-direction: column;
		min-width: 450rpx;
	}

	.searchresult-list-item-info-name {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.searchresult-list-item-info-name-txt {
		font-size: 30rpx;
		font-weight: 500;
		line-height: 42rpx;
		color: #333333;
	}

	.searchresult-list-item-info-name-jl {
		font-size: 23rpx;
		line-height: 32rpx;
		color: #999999;
	}

	.searchresult-list-item-info-score {
		margin-top: 4rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-left: 2rpx;
	}

	.searchresult-list-item-info-score .uni-rate {}

	.searchresult-list-item-info-score-txt {
		margin-left: 14rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #333333;
		font-weight: 500;
		position: relative;
		top: -4rpx;
	}

	.searchresult-list-item-info-discount {
		margin-top: 10rpx;
		display: flex;
		align-items: center;
	}

	.searchresult-list-item-info-discount-item {
		display: flex;
		align-items: center;
		margin-right: 32rpx;
	}

	.searchresult-list-item-info-discount-item:last-child {
		margin-right: 0;
	}

	.searchresult-list-item-info-discount-item-vipleft {
		font-size: 24rpx;
		font-weight: 400;
		color: #E8541E;
		line-height: 34rpx;
		padding: 2rpx 4rpx 0 8rpx;
		border-radius: 2rpx;
		background: rgba(233, 90, 39, 0.1);
	}

	.searchresult-list-item-info-discount-item-viplefttxt {
		font-size: 24rpx;
		line-height: 34rpx;
		color: #E8541E;
		margin-left: 10rpx;
	}

	.searchresult-list-item-info-discount-item-huiyuanleft {
		font-size: 24rpx;
		font-weight: 400;
		color: #1E92E8;
		line-height: 34rpx;
		padding: 2rpx 4rpx 0 8rpx;
		border-radius: 2rpx;
		background: rgba(30, 146, 232, 0.1);
	}

	.searchresult-list-item-info-discount-item-huiyuanlefttxt {
		font-size: 24rpx;
		line-height: 34rpx;
		color: #1E92E8;
		margin-left: 10rpx;
	}

	.searchresult-list-item-info-list {
		margin-top: 14rpx;
		display: flex;
		align-items: center;
	}

	.searchresult-list-item-info-list-item {
		display: flex;
		align-items: center;
		margin-right: 18rpx;
	}

	.searchresult-list-item-info-list-item:last-child {
		margin-right: 0;
	}

	.searchresult-list-item-info-list-item-content {
		position: relative;
		display: inline-block;
		line-height: 34rpx;
		padding: 2rpx 14rpx;
		margin-left: 20rpx;
		background-color: #f7b500;
		font-size: 14rpx;
		font-weight: normal;
		color: #ffffff;
		border-radius: 4rpx;
		box-sizing: border-box;
	}

	.searchresult-list-item-info-list-item-content::before {
		content: '';
		display: block;
		position: absolute;
		top: -6rpx;
		left: -42rpx;
		border-width: 24rpx;
		border-style: solid;
		border-color: transparent #f7b500 transparent transparent;
		border-top-right-radius: 50%;
		border-bottom-right-radius: 50%;
	}

	.searchresult-list-item-info-list-item-content::after {
		content: '';
		display: block;
		position: absolute;
		top: calc(50% - 2px);
		left: 0;
		width: 4px;
		height: 4px;
		background-color: #ffffff;
		border-radius: 50%;
	}
</style>
